<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>焦点图</title>
<link rel="stylesheet" href="../../assets/css/reset.css"/>
<style type="text/css">
a{ color: #3E3E3E; font:12px/1.5 arial,"宋体",sans-serif;}
.selffocus{ height:330px; margin-top:16px; width:1000px; position:relative; background-color:#e7e6e6;}
.selffocus-list{ width:1000px; height:330px; overflow:hidden; position:relative;}/*argb0818*/
.selffocus-list li.focus-item{ position:absolute; top:0; left:0;  }/*argb0818*/


.selffocus-list li.curr{display:block;}
.selffocus-img{ width:690px; float:left;}
.selffocus-cont{ float:left;  width:310px; height:330px; }
.selffocus-title{ font-size:16px;height:30px; line-height:30px;color:0f0f0f margin-top:25px; margin:24px 20px 12px; color:#fff; border-bottom:1px solid #bebdbd; padding-bottom:2px; font-weight:bold;}
.selffocus-content{margin-left:20px; width:253px; display:block;font-size:12px; line-height:20px; color:#0f0f0f;}
.selffocus-content p { height:60px; overflow:hidden;}
.selffocus-content li { line-height:26px; padding-left:20px; background: url(images/focus-icons.png) 4px 10px no-repeat; }
.selffocus-content ul { padding-top:12px; height:130px; overflow:hidden;}
.selffocus-trigger { position: absolute; right:20px; bottom:13px; height:25px;}
.selffocus-trigger a { text-decoration:none; color: #838282; padding:6px 10px;  background: url(images/focus-icons.png) 1px -49px no-repeat;}
.selffocus-trigger a.active { background-position:1px -15px; color: #777;}
</style>
</head>
<body>
	
	<!--按照此段写样式，焦点图html由后端输出，别用html5渲染-->
	<div class="selffocus" id="focus">
		<ul class="selffocus-list">
				<li class="clearfix focus-item" style="display:block">
					<div class="selffocus-img">
						<a target="_blank" title="" href="#"><img src="http://img.self.com.cn/userfiles/201206/133886549399.jpg" alt=""/></a>
					</div>
					<div class="selffocus-cont">
						<div class="selffocus-title">
							<a target="_blank" href="#" title="">秀场实穿 4款衬衫演绎换季搭配</a>
						</div>
						<div class="selffocus-content">
							<p>1如果你还认为衬衫只能搭配一本正经的西装，那你就OUT啦！衬衫可谓是男人衣橱中的百搭单品。换季时期如何将衬衫分类</p>
							<ul>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
							</ul>
						</div>
					</div>
			</li>
			<li class="clearfix focus-item">
					<div class="selffocus-img">
						<a target="_blank" title="" href="#"><img src="http://img.self.com.cn/userfiles/201205/133785429250.jpg" alt=""/></a>
					</div>
					<div class="selffocus-cont">
						<div class="selffocus-title">
							<a target="_blank" href="#" title="">秀场实穿 4款衬衫演绎换季搭配</a>
						</div>
						<div class="selffocus-content">
							<p>2如果你还认为衬衫只能搭配一本正经的西装，那你就OUT啦！衬衫可谓是男人衣橱中的百搭单品。换季时期如何将衬衫分类</p>
							<ul>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
							</ul>
						</div>
					</div>
			</li>
			<li class="clearfix focus-item">
					<div class="selffocus-img">
						<a target="_blank" title="" href="#"><img src="http://img.self.com.cn/userfiles/201206/133852980868.jpg" alt=""/></a>
					</div>
					<div class="selffocus-cont">
						<div class="selffocus-title">
							<a target="_blank" href="#" title="">秀场实穿 4款衬衫演绎换季搭配</a>
						</div>
						<div class="selffocus-content">
							<p>3如果你还认为衬衫只能搭配一本正经的西装，那你就OUT啦！衬衫可谓是男人衣橱中的百搭单品。换季时期如何将衬衫分类</p>
							<ul>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
								<li><a target="_blank" href="#" title="">一二三四五言模压顶替胆以</a></li>
							</ul>
						</div>
					</div>
			</li>
		</ul>
		<div  class="selffocus-trigger">
			<a href="#" class="active">1</a>
			<a href="#" class="">2</a>
			<a href="#" class="">3</a>
		</div>
	</div>

<script src='../../jquery/jquery-1.7.1.min.js'></script>
<script src='jquery.switchable-2.0.min.js'></script>
<script type="text/javascript">
	$('.selffocus-list').switchable({
		//triggers: '&bull;',
		triggers: null,
		panels: '.focus-item',
		easing: 'ease-in-out',
		effect: 'fade',
		delay: 1,
		steps: 1,    //步长
		visible: 1,  //可视Li
		end2end: true,
		autoplay: true,
		interval: 4,
		api: true
	}); 
</script>
</body>
</html>
